<template>
  <div>
    <common-menu :to-path="['blogPublish','blogList']" :flag="1" :text="['发布','列表']"></common-menu>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="my-padded-tb-large">
      <div class="ui container">
        <div class="ui segment form">
          <div class="fields inline my-margin-top-small">
            <el-form :inline="true" ref="blogSearchForm" :model="blogSearchForm">
              <el-form-item label="标题" prop="title">
                <el-input v-model="blogSearchForm.title" clearable placeholder="请输入标题" style="width: 200px;"></el-input>
              </el-form-item>
              <el-form-item label="分类" prop="typeId">
                <el-select v-model="blogSearchForm.typeId" clearable filterable placeholder="请选择分类" style="width: 200px;">
                  <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标签" prop="tagIds">
                <el-select v-model="blogSearchForm.tagIds" multiple clearable allow-create default-first-option placeholder="请选择标签" style="width: 200px;">
                  <el-option v-for="item in tags" :key="item.name" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发布状态" prop="published">
                <el-switch v-model="published"></el-switch>
              </el-form-item>
              <el-form-item prop="status">
                <el-checkbox v-model="recommend">推荐</el-checkbox>
                <el-checkbox v-model="shareStatement">转载声明</el-checkbox>
                <el-checkbox v-model="appreciation">赞赏</el-checkbox>
                <el-checkbox v-model="commentabled">评论</el-checkbox>
              </el-form-item>
              <el-form-item>
                <button type="button" @click="onSubmit()" class="ui blue basic button"><i class="search icon"></i>查询</button>
                <button type="button" @click="resetForm('blogSearchForm')" class="ui blue basic button"><i class="redo icon"></i>重置</button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <table class="ui celled table">
          <thead>
          <tr style="text-align: center">
            <th></th>
            <th>标题</th>
            <th>分类</th>
            <th>标签</th>
            <th>发布状态</th>
            <th>是否推荐</th>
            <th>开启转载声明</th>
            <th>开启赞赏</th>
            <th>开启评论</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(blog, index) in blogList" style="text-align: center">
            <td>{{index+1}}</td>
            <td width="260px">{{blog.title}}</td>
            <td width="80px">{{blog.type}}</td>
            <td width="80px">
              <el-tag :disable-transitions="true" v-for="tag in blog.tags" :key="tag">{{tag}}</el-tag>
            </td>
            <td>{{blog.published==0?'发布':'保存'}}</td>
            <td>{{blog.recommend==0?'是':'否'}}</td>
            <td>{{blog.shareStatement==0?'是':'否'}}</td>
            <td>{{blog.appreciation==0?'是':'否'}}</td>
            <td>{{blog.commentabled==0?'是':'否'}}</td>
            <td width="100px">{{blog.updateTime}}</td>
            <td width="275px">
              <router-link tag="a" :to="{path:'/comment',query:{blogId:blog.id}}" class="ui teal basic button">评论( {{blog.commentCount==null?'0':blog.commentCount}} )</router-link>
              <br>
              <router-link tag="a" :to="{name:'blogPublish',params:{blogId:blog.id,flag:0,page:page.pageNum}}" class="ui blue basic button">编辑</router-link>
              <a @click="deleteBlog(blog.id, blog.title)" class="ui red basic button">删除</a>
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <th colspan="16">
              <div class="ui right floated pagination menu">
                <a @click="previousPage()" :class="previousPageClass + ' item'">上一页</a>
                <a @click="nextPage()" :class="nextPageClass + ' item'">下一页</a>
              </div>
            </th>
          </tr>
          </tfoot>
        </table>

      </div>
    </div>
  </div>
</template>

<script>
  import CommonMenu from "../../components/CommonMenu";
  import {deleteBlogById, queryAllBlogByBlogAndLimit, queryAllBlogByLimit} from "../../api/blog";
  import {queryAllType} from "../../api/type";
  import {queryAllTag} from "../../api/tag";

  export default {
    name: "BlogList",
    components: {CommonMenu},
    data() {
      return {
        page: {},
        previousPageClass: 'disabled',
        nextPageClass: '',
        blogList: [],
        blogSearchForm: {
          title: null,
          typeId: null,
          tagIds: null,
          // 是否推荐
          recommend: 0,
          // 是否开启转载声明
          // shareStatement: 1,
          // 是否开启赞赏
          // appreciation: 1,
          // 是否开启评论
          // commentabled: 1,
          // 是否发布
          published: 0,
        },
        recommend: true,
        shareStatement: false,
        appreciation: false,
        commentabled: false,
        published: true,
        types: [],
        tags: [],
        searchData: null
      }
    },
    watch: {
      recommend: function (val, oldVal) {
        if (val) {
          this.blogSearchForm.recommend = 0
        } else {
          this.blogSearchForm.recommend = null
        }
      },
      shareStatement: function (val, oldVal) {
        if (val) {
          this.blogSearchForm.shareStatement = 0
        } else {
          this.blogSearchForm.shareStatement = null
        }
      },
      appreciation: function (val, oldVal) {
        if (val) {
          this.blogSearchForm.appreciation = 0
        } else {
          this.blogSearchForm.appreciation = null
        }
      },
      commentabled: function (val, oldVal) {
        if (val) {
          this.blogSearchForm.commentabled = 0
        } else {
          this.blogSearchForm.commentabled = null
        }
      },
      published: function (val, oldVal) {
        if (val) {
          this.blogSearchForm.published = 0
        } else {
          this.blogSearchForm.published = null
        }
      }
    },
    activated() {
      // 新增后返回
      if (this.$route.query.flag == 1) {
        this.getBlogList(this.page.pages, null)
      } else if (this.$route.query.flag == 0) {
        //  更新后返回
        this.getBlogList(this.$route.query.page, null)
      }
    },
    created() {
      this.getTags();
      this.getTypes();
      this.getBlogList(1, null);
    },
    methods: {
      previousPage() {
        if (this.page.pageNum>1) {
          if (this.searchData !== null) {
            this.getBlogList(this.page.pageNum - 1, this.searchData)
          } else {
            this.getBlogList(this.page.pageNum - 1, null)
          }
        }
      },
      nextPage() {
        if (this.page.pageNum<this.page.pages) {
          if (this.searchData !== null) {
            this.getBlogList(this.page.pageNum + 1, this.searchData)
          } else {
            this.getBlogList(this.page.pageNum + 1, null)
          }
        }
      },
      getTypes() {
        queryAllType().then(res => {
          if (res.code === 200) {
            this.types = res.data;
          }
        })
      },
      getTags() {
        queryAllTag().then(res => {
          if (res.code === 200) {
            this.tags = res.data;
          }
        })
      },
      onSubmit() {
        let from = this.blogSearchForm;
        let data = {
          page: 1,
          size: 8,
          typeId: from.typeId,
          tagIds: from.tagIds,
        }
        if (from.title!==''&&from.title!==null) {
          data.title = from.title
        }
        if (from.recommend == 0) {
          data.recommend = from.recommend
        }
        if (from.shareStatement == 0) {
          data.shareStatement = from.shareStatement
        }
        if (from.appreciation == 0) {
          data.appreciation = from.appreciation
        }
        if (from.commentabled == 0) {
          data.commentabled = from.commentabled
        }
        if (from.published == 0) {
          data.published = from.published
        }
        if (from.appreciation!==0&&from.commentabled!==0
          &&from.published!==0&&from.recommend!==0&&from.shareStatement!==0
          &&from.tagIds.length===0&&from.typeId==null&&(from.title==null||from.title==='')) {
          data.published = 1
        }
        this.getBlogList(1, data);
        this.searchData = data
      },
      resetForm(formName) {
        this.published = true
        this.recommend = true
        this.commentabled = false
        this.appreciation = false
        this.shareStatement = false
        this.$refs[formName].resetFields();
        this.searchData = null
        this.getBlogList(1, null)
      },
      getBlogList(page, data) {
        // 条件查询
        if (data !==null) {
          data.page = page
          data.size = 8
          queryAllBlogByBlogAndLimit(data).then(res => {
            if (res.code === 200) {
              this.page = res.data
              this.blogList = res.data.list
              this.initBlogList()
            }
          })
        } else {
        //  普通分页查询
          let query = {
            page,
            size: 8
          }
          queryAllBlogByLimit(query).then(res => {
            if (res.code === 200) {
              this.blogList = res.data.list;
              this.page = res.data;
              this.initBlogList()
            } else {
              return Promise.reject('error');
            }
          })
        }
      },
      initBlogList() {
        // 将typeId和tagIds转化为文字
        this.blogList.forEach(value => {
          this.types.forEach(typeValue => {
            if (typeValue.id === value.typeId) {
              value.type = typeValue.name
            }
          })
          let arr = []
          this.tags.forEach(tagValue => {
            value.tagIds.forEach(value1 => {
              if (tagValue.id === value1) {
                arr.push(tagValue.name)
              }
            })
          })
          value.tags = arr
        })
        if (!this.page.hasPreviousPage) {
          this.previousPageClass = 'disabled'
        } else {
          this.previousPageClass = ''
        }
        if (!this.page.hasNextPage) {
          this.nextPageClass = 'disabled'
        } else {
          this.nextPageClass = ''
        }
      },
      deleteBlog(id, name) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确认删除 '),
            h('strong', { style: 'color: teal' }, name),
            h('span', null, '吗 '),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
                let params = {
                  id
                }
                deleteBlogById(params).then(res => {
                  if (res.code === 200) {
                    this.$message({
                      message: "删除成功",
                      type: 'success',
                    })
                    this.getBlogList(1, null)
                  } else {
                    return Promise.reject('error');
                  }
                })
              }, 1000);
            } else {
              done();
            }
          }
        });
      }
    },
  }
</script>

<style scoped>

</style>
